<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE>
<html>
<head>
<base href="<%=basePath%>" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>欢迎使用网上图书馆系统</title>
<link rel="stylesheet" href="resources/css/index.css" />
<link rel="stylesheet" href="resources/css/jPages.css" />
<link rel="stylesheet" href="resources/css/animate.css" />
<script type="text/javascript" src="resources/js/jquery.js"></script>
<script type="text/javascript" src="resources/js/jPages.js"></script>
</head>
<body>
	<div id="templatemo_container">
		<div id="templatemo_banner"></div>
		<!-- end of banner -->

		<div id="templatemo_menu">
			<ul>
				<li><a href="index">主页</a></li>
				<li><a href="book" class="current">图书信息查询</a></li>
				<li><a href="user">用户信息查询</a></li>
				<li><a href="signUp">用户注册</a></li>
			</ul>
		</div>

		<div id="templatmeo_content_bottom">
			<div>
				<h1>热门借阅图书</h1>
				<div>
					<c:forEach items="${hotBooks}" var="hotBook">
						<a href="book/${hotBook.id}">书名:${hotBook.bookname}&nbsp;&nbsp;<span>作者：${hotBook.author}</span>&nbsp;&nbsp;&nbsp;
							<span>图书编号：${hotBook.bookindex}</span>&nbsp;&nbsp; <span>借还日期：${hotBook.borrowDate}--${hotBook.returnDate}</span>&nbsp;&nbsp;&nbsp;
							<span>是否在馆：<c:choose>
									<c:when test="${hotBook.isBorrowed}">否</c:when>
									<c:otherwise>是</c:otherwise>
								</c:choose>
						</span>&nbsp;&nbsp;&nbsp; <span>出版日期：${hotBook.publicDate}</span>&nbsp;&nbsp;&nbsp;
							借阅次数:${hotBook.borrowNum}
						</a>
						<br><br>
					</c:forEach>
				</div>
				<br> <br>
				<h1>按书名查询</h1>
				<div>
					<input type="text" size="50" url="bookname" />
					<button class="query">查询</button>
				</div>
				<hr>
				<h1>按作者查询</h1>
				<div>
					<input type="text" size="50" url="authorname" />
					<button class="query">查询</button>
				</div>
				<hr>
				<h1>按编号查询</h1>
				<div>
					<input type="text" size="50" url="bookindex" />
					<button class="query">查询</button>
				</div>
				<hr>
			</div>
			<br> <br>
			<!-- 输出查询结果 -->
			<div id="result">
				<h1 id="searchResult" hidden="true">搜索结果</h1>
				<div id="books" style="font-size: 15px"></div>
				<div class="holder"></div>
			</div>

			<div class="margin_bottom_40 b_bottom"></div>
			<div class="margin_bottom_30"></div>

			<div id="templatemo_footer">

				<ul class="footer_list" id="a">
					<li><a href="index">主页</a></li>
					<li><a href="book" class="current">图书信息查询</a></li>
					<li><a href="user">用户信息查询</a></li>
					<li><a href="signUp">用户注册</a></li>
				</ul>

				<div class="margin_bottom_10"></div>

				Copyright © 2014 <a href="http://www.zjut.edu.cn/">浙江工业大学</a> |
				Designed by 李德建

				<div class="margin_bottom_20"></div>
			</div>

			<div class="cleaner"></div>
		</div>
		<!-- end of content bottom -->
	</div>
	<script type="text/javascript">
		//点击查询按钮以后
		$('button.query').click(function() {
			$('#searchResult').hide();
			var input = $(this).prev().val();
			var url = $(this).prev().attr('url');
			var $booksDiv = $('#books');
			$booksDiv.text('');
			$.ajax({
				url : 'bookQuery/' + url,
				type : 'post',
				data : {
					keyword : input
				},
				success : function(response) {
					$('#searchResult').show();
					$booksDiv.append(response);
					$("div.holder").jPages({
						containerID : "books",
						previous : "上一页",
						next : "下一页",
						perPage : 10,
						delay : 10
					});
				}
			});
		});
	</script>
</body>
</html>